import React, { Component } from 'react';
import { Row, Col, } from 'antd';
import { Link } from 'react-router';

import './ProductList.less';

export default class ProductList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data,
            list_count: this.props.Listcount,
        };
    }

    BTN_SORT_NORMAL = "normal";
    BTN_SORT_TIME = "time";
    BTN_SORT_PRICE = "price";
    BTN_SORT_GRADE = "grade";

    SORT_NORMAL = 0;
    SORT_UP = 1;
    SORT_DOWN = -1;

    type_handleClick(sort_type, sort_val, event) {
        this.props.sortCallback(sort_type, sort_val)
    }

    HandleNavigate() {
        const w = window.open('about:blank');
        w.location.href = '/order';
    }

    render() {
        return (
            <div>
                <div className="wrap-product-sort" >
                    <Col span={24}>
                        <article>
                            <div className="bar-normal" onClick={(event) => this.type_handleClick(this.BTN_SORT_NORMAL, this.SORT_NORMAL, event)}>
                                <p>默认排序</p>
                            </div>
                            <div >
                                <p>上架时间</p>
                                <div>
                                    <p className="bar-sort"
                                        onClick={(event) => this.type_handleClick(this.BTN_SORT_TIME, this.SORT_UP, event)}>&#9650;</p>
                                    <p className="bar-sort"
                                        onClick={(event) => this.type_handleClick(this.BTN_SORT_TIME, this.SORT_DOWN, event)}>&#9660;</p>
                                </div>
                            </div>
                            <div >
                                <p>价格</p>
                                <div>
                                    <p className="bar-sort"
                                        onClick={(event) => this.type_handleClick(this.BTN_SORT_PRICE, this.SORT_UP, event)}>&#9650;</p>
                                    <p className="bar-sort"
                                        onClick={(event) => this.type_handleClick(this.BTN_SORT_PRICE, this.SORT_DOWN, event)}>&#9660;</p>
                                </div>
                            </div>
                            <div>
                                <p>评分</p>
                                <div>
                                    <p className="bar-sort"
                                        onClick={(event) => this.type_handleClick(this.BTN_SORT_GRADE, this.SORT_UP, event)}>&#9650;</p>
                                    <p className="bar-sort"
                                        onClick={(event) => this.type_handleClick(this.BTN_SORT_GRADE, this.SORT_DOWN, event)}>&#9660;</p>
                                </div>
                            </div>
                            <p className="bar-search-count">
                                <strong>为您找到&nbsp;</strong>
                                <strong>{this.state.list_count}</strong>
                                &nbsp;条结果
                        </p>
                        </article>
                    </Col>
                </div>
                {this.state.data.map(function (val, index) {
                    return <div className="wrap-product-list" key={index} >
                        <Link to={'/order'}>
                            <div className="row-div">
                                <Row className="row-product">
                                    <Col span={24}>
                                        <div className="div-img">
                                            <img src={val.icon} alt=""></img>
                                        </div>
                                        <div className="div-context">
                                            <p className="product-title">{val.title}</p>
                                            <p className="product-context"><strong>支付方式：</strong>{val.delivery}</p>
                                            <p className="product-context">{val.description}</p>
                                            <p className="product-oem"><strong>服务商：</strong>{val.OEM}</p>
                                        </div>
                                        <div className="div-evaluate">
                                            <p className="product-evaluate">
                                                <strong>平台保障：</strong>{
                                                    val.Guarantee.map(function (val, index) {
                                                        return <strong className="s-symbol" key={index}>{val}</strong>
                                                    })}
                                            </p>
                                            <p className="product-star">
                                                <strong>产品评分：</strong>{
                                                    val.grade.map(function (val, index) {
                                                        return <strong className="star" key={index}>&#9733;</strong>
                                                    })}
                                            </p>
                                            <p className="product-users"><strong>使用人数：</strong>{val.users}</p>
                                        </div>
                                        <div className="div-price">
                                            <p className="product-price"><strong>¥&nbsp;</strong>{val.price}</p>
                                        </div>
                                    </Col>
                                </Row>
                                <Row className="row-bottom-desc">
                                    <Col span={24}>
                                        <p>{
                                            val.bottom_description.map(function (val, index) {
                                                return <strong key={index}>{val}</strong>
                                            })}
                                        </p>
                                    </Col>
                                </Row>
                            </div>
                        </Link>
                    </div>

                })}

            </div>
        );
    }
}